<template>
  <div class="markt-proportion">
    <p class="title">
      停车市场占比
      <img style="height: 0.7em;margin-left: 0.3em;" src="../../../../assets/bigDataSourceImage/barTitleIcon.png">
    </p>
    <div>
      <Pie :list="list"/>
    </div>
  </div>
</template>

<script>
  import Pie from '@/components/Pie/index.vue'

  export default {
    name: 'markt-proportion',
    components: {Pie},
    data() {
      return {
        list: [
        	{num: 80, name: '免费', color: '#67CDCD'},
        	{num: 60, name: '0-1小时', color: '#FF689E'},
        	{num: 100, name: '1-2小时', color: '#6766CD'},
        	{num: 50, name: '2-3小时', color: '#00D3D2'},
        	{num: 70, name: '3-4小时', color: '#FF9D5D'},
          {num: 50, name: '4-5小时', color: '#1f74f1'},
          {num: 70, name: '5小时以上', color: '#37c5f3'}
        ]
      }
    },
    mounted() {

    },
    methods: {

    }
  }
</script>

<style scoped>
  .markt-proportion {
    height: 100%;
    padding: 1.4em;
    border: 1px solid transparent;
    border-image-source: url('../../../../assets/bigDataSourceImage/box1.png');
    border-image-slice: 26 26 26 26;
    border-image-repeat: stretch;
    border-image-width: 26px;
    box-sizing: border-box;
  }
  .title {
    margin: 0;
    color: #fff;
    font-size: 0.8em;
  }


</style>
